<template>
	<view class="uni_box home">
		<!-- <navbar title='纠错' :yin="true">
		</navbar> -->
		<view class="wenhead">
			<image class="pbg" src="@/pages_subject/static/img/wenbg.png" mode="" />
			<view class="wenitem">
				<u-icon name="arrow-left" color="#fff" size="40" class="fan" @click="getfan"></u-icon>
				<text class="biaoti">提问</text>
			</view>
		</view>
		<view class="content">
			<view class="wentwo">
				<text class="biaoti">你的问题：</text>
				<view class="tifour">
					<u-input v-model="content" type="textarea" :border="false" placeholder="请填写具体内容帮助我们了解您的意见和建议" />
				</view>
				<text class="biaoti" style="margin-top: 50rpx;">添加图片：<text class="biaomiao">（最多添加三张图片）</text></text>
				<view class="tulist">
					<view class="tuitem" @click="upload" v-if="tuimg.length<=3">
						<image class="xiangji" src="@/pages_subject/static/img/xiangji.png" mode="" />
					</view>
					<view class="tuitem" v-for="(item,index) in tuimg" :key="index" @click="getyulan(item,tuimg)">
						<image class="tuitemimg" :src="item" mode="" />
					</view>
				</view>
			</view>


			<view class="jiaojuean">
				<view class="tibtn" @click="jiaobtn">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/utils/config.js';
	export default {
		data() {
			return {
				num: 28,
				value: '',
				headimg: '',
				tuimg: [],
				content: '',
				tid: ''
			}
		},
		onLoad(option) {
			this.tid = option.tid
		},
		onShow() {},
		methods: {
			async jiaobtn() {
				if (!this.content) {
					this.$u.toast("请输入内容");
					return false;
				}
				let res = await this.$u.api.addQuestionByTopic({
					tid: this.tid,
					content: this.content,
					image: this.tuimg.toString()
				});
				this.$u.toast("提交成功");
				// this.navrouter("/pages_subject/twoPage/TiPage/TiBaogao");
			},
			getfan() {
				uni.navigateBack()
			},
			upload(e) {
				// this.updatetype = e
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou()
						// this.getavatar();//修改信息
					}
				});
			},
			unloadtou() {
				// console.log(this.head_portrait)
				let that = this
				uni.uploadFile({
					// url: baseUrl + '/api/uploadImage', //仅为示例，非真实的接口地址
					url: baseUrl + '/api/v1.common/upload', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'file',
					header: {
						// 'content-type': 'application/json;charset=UTF-8',
						'token': uni.getStorageSync('token'),
						'shopId': uni.getStorageSync('shopId'),
					},
					// formData: {
					// 	'token':'Bearer '+uni.getStorageSync('token'),
					// },
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).data);
						let tuimg = that.tuimg
						tuimg.push(JSON.parse(uploadFileRes.data).data.fullurl)
						that.tuimg = tuimg
					}
				});
			},
			getyulan(item, list) {
				uni.previewImage({
					current: item, //预览图片的下标
					urls: list //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.wenhead {
		position: relative;
		height: 354rpx;

		.pbg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.wenitem {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx;

			.fan {
				position: absolute;
				left: 30rpx;
			}

			.biaoti {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
			}

		}
	}

	.content {
		background-color: #fff;
		padding: 40rpx 0rpx;

		.jiuone {
			padding: 0 30rpx;

			.jiutit {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #010101;
				display: block;
				margin-bottom: 40rpx;
			}

			.jiunav {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.jiuitem {
					padding: 18rpx 40rpx;
					background: #EEEEEE;
					border-radius: 50rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}

				.jactive {
					background: linear-gradient(-90deg, #FA4E4E, #FD894F);
					color: #fff;
				}
			}
		}

		.wentwo {
			margin: -30% 30rpx 30rpx;
			position: relative;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 50rpx 22rpx;
			box-shadow: 20rpx 10rpx 20rpx 20rpx rgba(202, 205, 217, 0.14);
		}

		.tifour {
			padding: 20rpx;
			background: rgba(170, 170, 170, 0.2);
			border-radius: 10rpx;
			height: 200rpx;
			// margin: 0 30rpx;
		}

		.biaoti {
			display: block;
			margin-bottom: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #111111;
		}

		.biaomiao {
			color: rgba(153, 153, 153, 1);
			font-size: 20rpx;
		}

		.ganxie {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: block;
			margin: 40rpx 30rpx;
		}

		.tulist {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.tuitem {
				background: #FFFFFF;
				border-radius: 5rpx;
				// box-shadow: 20rpx 10rpx 20rpx 20rpx rgba(202,205,217,0.14);
				width: 150rpx;
				height: 150rpx;
				border: 1rpx solid #eee;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 20rpx 20rpx 0;
				position: relative;

				.xiangji {
					width: 46rpx;
					height: 42rpx;
				}

				.tuitemimg {
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
		}

		.kaone {
			height: 96rpx;
			background-color: #eee;
			width: 100%;
			position: relative;
			padding: 0 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.kaitem {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 50rpx;

				.yuans {
					width: 28rpx;
					height: 28rpx;
					margin-right: 15rpx;
				}

				text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}

			}
		}

		.katwo {
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.kkatwoitem {
				width: 25%;
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.ktitem {
					width: 75rpx;
					height: 75rpx;
					background: #EEEEEE;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}

			}

			.kactive {
				.ktitem {
					background: #FD864F;
					color: #fff;
				}

			}
		}

		.jiaojuean {
			position: fixed;
			width: 100%;
			height: 120rpx;
			bottom: 0;
			background: #FFFFFF;
			box-shadow: 0rpx -10rpx 20rpx 0rpx rgba(202, 205, 217, 0.14);
			// background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			padding: 0 30rpx;

			.tibtn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 40rpx;
				width: 100%;
			}
		}

		// padding-bottom: 150rpx;
	}
</style>